<template>
  <div>
    <a-switch v-model:checked="off"
     :disabled="disabled"
     checked-children="开" un-checked-children="关" @change="changeStatus"/>
    
  </div>
</template>
<script>
import { defineComponent, reactive, toRefs ,computed} from 'vue';
import { CheckOutlined, CloseOutlined } from '@ant-design/icons-vue';
export default defineComponent({
  components: {
    CheckOutlined,
    CloseOutlined,
  },
  props:{
    status:{
        type:Boolean,
        default:function(){
            return false
        }
    },
     data:{
        type:Object,
        default:function(){
            return {}
        }
    },
    disabled:{
      type:Boolean,
      default:function(){
        return false
      }
    }
  },
  emits:{
     "changeSwitch":null
  },
  setup(props,context) {
      const off = computed(() => {
          return props.status;
      })
    const state = reactive({
      checked: true,
      
    });
    const disabled = computed(()=>{
      return props.disabled;
    });
    const changeStatus=(status)=>{
        
       context.emit("changeSwitch",{data:props.data,status});
    }
    return { ...toRefs(state),
    off,
    changeStatus,
    disabled
    };
  },

});
</script>